<template>
  <div class="qikan">
    <h2>期刊学科导航</h2>
    <el-divider></el-divider>
    <div>
      <el-row :gutter="15">
        <el-form ref="elForm" :model="problem" size="medium" label-width="100px" label-position="top">
          <el-col :span="7">
            <el-form-item label-width="0" prop="field101">
              <el-select v-model="problem.field101" placeholder="学科分类：" clearable :style="{width: '100%'}">
                <el-option v-for="(item, index) in field101Options" :key="index" :label="item.label" :value="item.value"
                  :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label-width="0" prop="field106">
              <el-select v-model="problem.field106" placeholder=" 文献分类：" clearable :style="{width: '100%'}">
                <el-option v-for="(item, index) in field106Options" :key="index" :label="item.label" :value="item.value"
                  :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="" prop="field107">
              <el-button type="primary" icon="el-icon-search" size="medium"> 查询 </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <div class="qimain">
      <h3> 学科：<span>所有学科 </span> 文献类型：<span>期刊 </span> 总数：<span>8137</span></h3>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
      </el-table>
      <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000">
      </el-pagination>
    </div>
  </div>
</template>
<script>
    export default {
        components: {},
        props: [],
        data() {
            return {
                problem: {
                    field101: undefined,
                    field106: undefined,
                    field107: undefined,
                },
                field101Options: [{
                    "label": "选项一",
                    "value": 1
                }, {
                    "label": "选项二",
                    "value": 2
                }],
                field106Options: [{
                    "label": "选项一",
                    "value": 1
                }, {
                    "label": "选项二",
                    "value": 2
                }],
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        },
        computed: {},
        watch: {},
        created() {},
        mounted() {},
        methods: {}
    }
</script>
<style>

</style>

<style>
    .qikan {
        padding: 30px;
    }

    .qimain h3 {
        line-height: 25px;
        margin: 10px 20px;
        font-size: 16px;
        font-style: italic;
    }

    .qimain h3 span {
        color: purple;
    }
</style>
